<template>
    <div class="index">
        <el-row>
            <el-col class="container" :span="12">
                <div class="info">
                    <h3>TOOLBOX</h3>
                </div>
            </el-col>
            <el-col class="container" :span="12">
                <ul class="menus">
                    <li v-for="menu in menus" :key="menu.name" @click="jumpClick(menu)">
                        <icon class="icon" :icon="menu.icon" :size="4.6"></icon>
                        <span v-text="menu.name"></span>
                    </li>
                </ul>
            </el-col>
        </el-row>
    </div>
</template>

<script type="text/ecmascript-6">
  import menus from "./menus";
  import Icon from "../../components/common/Icon";

  /**
   * @author 白雨浓
   * @date 2019/6/23 15:01
   *
   * 首页
   **/
  export default {
    name: 'Index',
    components: {Icon},
    data() {
      return {
        menus: menus,
      }
    },
    mounted() {
      this.$nextTick(() => {

      })
    },
    methods: {
      jumpClick(menu) {
        this.$router.push(menu.link)
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .index {
        background-image url("../../assets/image/background.jpg")
        background-repeat no-repeat
        background-size cover
        background-attachment fixed
    }

    .container {
        position relative
        min-width 50%
        height 100vh
    }

    .info {
        position absolute
        top 50%
        left 50%
        width w = 300px
        height h = 300px
        margin-left -(w / 2)
        margin-top -(h / 2)
        text-align center
        color #eee
    }

    .menus {
        position absolute
        top 10vh
        right 40px
        list-style none
        overflow auto
        max-height 80vh

        li {
            position relative
            width 230px
            height 130px
            background-color #4C4A48
            color white
            text-align center
            margin 2px
            font-size .8em
            cursor pointer
            border 2px solid transparent
            transition all .1s
            float left

            &:hover {
                border 2px solid #A5A4A3
            }
        }

        .icon {
            margin 30px auto 0 auto
            color white
        }

        span {
            position absolute
            bottom 8px
            left 8px
            color white
            font-size .85em
        }
    }
</style>
